<template>
  <div class="hlk-wrap">
    <div ref="kongyun" class="kongyun"></div>
    <div ref="luyun" class="luyun" style="display:none;"></div>
    <div ref="haiyun" class="haiyun" style="display:none;"></div>
    <!--  <div ref="maoyifangshi" class="maoyifangshi"></div>
   <div ref="enterpriseranking" class="enterpriseranking"></div>-->
  </div>

</template>

<script>
  export default {
    name: 'haikukong',
    components: {

    },
    data() {
      return {
        clearanceRateShow: false,
        shenbao: 0,
        tongguan: 0,
        nowRATE: 0, //均价
        nowTAXES: 0, //税额
        KeDanJiaList: []
      }
    },
    mounted() {
      this.getkongyun();
      // this.getClearanceRateData();
      //setInterval(this.getClearanceRateData, 5000);
    },
    methods: {
      formatNumberRgx(num) {
        var parts = num.toString().split(".");
        parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        return parts.join(".");
      },
      getClearanceRateData() {
        const clearanceRate = this.$refs.clearanceRate;
        let _this = this;
        var that = this;
        let shenbao = 0;
        let tongguan = 0;
        /*申报/通关*/
        this.$myHttp.post("getTongGuanSHenBaoInfo")
          .then(function(data0) {
            if (data0.status == "200") {
              _this.shenbao = parseInt((data0.data.shenbao.XIADAN + data0.data.tongguan.DANLIANG) / 10000).toFixed(0);
              _this.tongguan = parseInt(data0.data.tongguan.DANLIANG / 10000).toFixed(0);

              tongguan = data0.data.tongguan.DANLIANG / 10000;
              tongguan = tongguan.toFixed(0);
              shenbao = data0.data.shenbao.XIADAN / 1000 + parseInt(tongguan);
              shenbao = shenbao.toFixed(0);
              let temptgl = parseInt(100000 * tongguan / shenbao) / 1000; // 通关率=通关数量/申报数量
              let tgl = temptgl.toFixed(2);
              let Rand = Math.random().toFixed(2);
              tgl = (parseFloat(tgl) + parseFloat(Rand)).toFixed(2).toString();
              if (tgl >= 100) {
                tgl = 99.99;
              }
              if (clearanceRate) {
                const myChart = _this.$echarts.init(clearanceRate)
                const option = {
                  title: {
                    text: '通关率',
                    left: 'center',
                    textStyle: {
                      color: "#fff",
                      fontWeight: "normal",
                      fontSize: that.commonFunction.fontSize(0.14),
                      lineHeight: that.commonFunction.fontSize(0.1),
                    },
                    subtext: "通关率=通关数量/申报数量", // 副标题文本
                    subtextStyle: {
                      color: '#fff',
                      fontSize: that.commonFunction.fontSize(0.12),
                      lineHeight: that.commonFunction.fontSize(0.1),
                      fontWeight: 'normal'
                    }, // 副标题样式
                  },
                  grid: {
                    left: '1%',
                    right: '1%',
                    bottom: '1%',
                    containLabel: true
                  },
                  tooltip: {
                    formatter: '通关率 : {c}%'
                  },

                  series: [{
                    //类型
                    type: 'gauge',
                    //半径
                    radius: that.commonFunction.fontSize(0.5),

                    //起始角度。圆心 正右手侧为0度，正上方为90度，正左手侧为180度。
                    startAngle: 210,
                    //结束角度。
                    endAngle: -30,
                    center: ['50%', '70%'],
                    animationDuration: 2000, //动画时长
                    animationDelay: function(idx) {
                      return idx * 10 + 1000;
                    },
                    //仪表盘轴线相关配置。
                    axisLine: {
                      show: true,
                      // 属性lineStyle控制线条样式
                      lineStyle: {
                        width: that.commonFunction.fontSize(0.05),
                        // color: [[1, '#63869e']],
                        color: [
                          [1, 'red']
                        ]
                      }
                    },
                    //分隔线样式。
                    splitLine: {
                      show: true,
                    },
                    //刻度样式。
                    axisTick: {
                      show: true,
                    },
                    splitLine: {
                      show: true,
                      length: that.commonFunction.fontSize(0.1),
                    },
                    //刻度标签。
                    axisLabel: {
                      show: false,
                      fontWeight: 'bolder',
                      color: '#3fc7e1', //刻度数字颜色 隐藏
                      shadowColor: '#fff', //默认透明
                      shadowBlur: that.commonFunction.fontSize(0.08)
                    },
                    axisTick: {
                      length: that.commonFunction.fontSize(0.06),
                      lineStyle: {
                        shadowColor: '#3fc7e1',
                        shadowBlur: that.commonFunction.fontSize(1)
                      }
                    },

                    //仪表盘指针。
                    pointer: {
                      //这个show属性好像有问题，因为在这次开发中，需要去掉指正，我设置false的时候，还是显示指针，估计是BUG吧，我用的echarts-3.2.3；希望改进。最终，我把width属性设置为0，成功搞定！
                      show: true,
                      //指针长度
                      length: '80%',
                      width: 3,
                    },
                    //仪表盘标题。
                    // title: {
                    //   show: true,
                    //   offsetCenter: [0, '-0%'], // x, y，单位px
                    //   textStyle: {
                    //     color: '#fff',
                    //     fontSize: that.commonFunction.fontSize(0.16)
                    //   }
                    // },
                    //仪表盘详情，用于显示数据。
                    detail: {
                      show: true,
                      offsetCenter: [0, '60%'],
                      formatter: '{value}%',
                      textStyle: {
                        fontSize: that.commonFunction.fontSize(0.12),
                        color: '#fff',
                      }
                    },
                    data: [{
                      value: 0,
                      // name: 'OEE'
                    }]
                  }]
                };
                var color = [
                  [80 / 100, '#1d82ff'],
                  [1, '#41ddeb']
                ];
                option.series[0].axisLine.lineStyle.color = color;
                option.series[0].data[0].value = tgl;
                myChart.setOption(option)
                window.addEventListener("resize", function() {
                  myChart.resize()
                })
              }
            }
          })
        /*均价/税额*/
        this.$myHttp.post("getKeDanJia")
          .then(function(data0) {
            if (data0.status == "200") {
              let date = new Date();
              let nowYear = date.getFullYear();
              data0.data.hn_average.forEach((item, index) => {
                if (item.YEAR == nowYear) {
                  _this.nowRATE = item.RATE;
                  _this.nowTAXES = item.TAXES;
                }
                _this.KeDanJiaList = data0.data.hn_average;

              })
            }

          })
      },

      getkongyun() {

        const kongyun = this.$refs.kongyun;
        const myChart1 = this.$echarts.init(kongyun);
        const luyun = this.$refs.luyun;
        const myChart2 = this.$echarts.init(luyun);
        const haiyun = this.$refs.haiyun;
        const myChart3 = this.$echarts.init(haiyun);

        var that = this;
        let _data1 = [{
            value: 80,
            name: '已占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: 'rgba(210, 35, 231, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(76, 143, 243, 0)'
                    }
                  ]
                )
              }
            }

          },
          {
            value: 20,
            name: '未占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#0095FF'
                    },
                    {
                      offset: 0.5,
                      color: '#0CB9FF'
                    },
                    {
                      offset: 1,
                      color: '#0095FF'
                    }
                  ]
                )
              }
            }
          }
        ]

        let options1 = {
          legend: {
            orient: 'vertical',
            right: 'right',
            bottom:'center',
            textStyle: {
              color: '#fff'
            },
            itemWidth:that.commonFunction.fontSize(0.15),
            itemHeight:that.commonFunction.fontSize(0.08),
          },
          series: [{
            name: '访问来源',
            type: 'pie',
            center: ['50%', '50%'],
            radius: '50%',
             startAngle: '120',
             minAngle: '30',
            data: [{
                value: 85,
                name: '空运'
              },
              {
                value: 8,
                name: '海运'
              },
              {
                value: 4,
                name: '铁运'
              },
              {
                value: 3,
                name: '卡班'
              }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: '#666'
              }
            },

            label: {
              normal: {
                show: true,
                // position: 'right',
                textStyle: {
                  fontSize: 14,
                  color: '#fff',
                  lineHeight: 12,
                },
                formatter: function(params) {
                  if (params.name !== '') {
                    let res = params.name + params.percent + "%";
                    return res;
                  } else {
                    return '';
                  }
                },
              }
            },
            color: ['#47f7f4', '#007ffe', '#fef102', '#ed6842', '#71f3b7', '#ffa939']
          }]
        };


        let _data2 = [{
            value: 5,
            name: '已占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: 'rgba(210, 35, 231, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(76, 143, 243, 0)'
                    }
                  ]
                )
              }
            }
          },
          {
            value: 95,
            name: '未占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#0095FF'
                    },
                    {
                      offset: 0.5,
                      color: '#0CB9FF'
                    },
                    {
                      offset: 1,
                      color: '#0095FF'
                    }
                  ]
                )
              }
            }
          }
        ]

        let options2 = {
          title: {
            show: true,
            text: '陆运',
            subtext: '5%',
            top: 80,
            left: 70,
            textAlign: 'center',
            z: 0,
            textStyle: {
              fontSize: '14',
              fontWeight: 'bold',
              color: '#fff'
            },
            subtextStyle: {
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          grid: {
            left: '0%', // 与容器左侧的距离
            right: '0%',
            top: '0%',
            bottom: '0%' // 与容器右侧的距离

          },
          series: [{
            name: 'from',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            textAlign: 'center',
            label: {
              normal: {
                // 此处重点，设置为显示
                show: false,
                position: 'center',
                formatter: '{b}\n{c}',
                align: 'center',
                verticalAlign: 'middle',
                // 此处重点，字体大小设置为0
                textStyle: {
                  fontSize: '0'
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                // 同步样式
                formatter: function(params) {
                  return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
                },
                rich: {
                  tTitle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  },
                  tSubTitle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _data2
          }]
        }





        let _data3 = [{
            value: 10,
            name: '已占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: 'rgba(210, 35, 231, 1)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(76, 143, 243, 0)'
                    }
                  ]
                )
              }
            }
          },
          {
            value: 90,
            name: '未占',
            itemStyle: {
              normal: { //颜色渐变
                color: new that.$echarts.graphic.LinearGradient(
                  0, 0, 0, 1,
                  [{
                      offset: 0,
                      color: '#0095FF'
                    },
                    {
                      offset: 0.5,
                      color: '#0CB9FF'
                    },
                    {
                      offset: 1,
                      color: '#0095FF'
                    }
                  ]
                )
              }
            }
          }
        ]

        let options3 = {
          title: {
            show: true,
            text: '海运',
            subtext: '10%',
            top: 80,
            left: 70,
            textAlign: 'center',
            z: 0,
            textStyle: {
              fontSize: '14',
              fontWeight: 'bold',
              color: '#fff'
            },
            subtextStyle: {
              fontSize: '20',
              fontWeight: 'bold'
            }
          },
          grid: {
            left: '0%', // 与容器左侧的距离
            right: '0%',
            top: '0%',
            bottom: '0%' // 与容器右侧的距离

          },
          series: [{
            name: 'from',
            type: 'pie',
            radius: ['50%', '70%'],
            avoidLabelOverlap: false,
            hoverAnimation: false,
            textAlign: 'center',
            label: {
              normal: {
                // 此处重点，设置为显示
                show: false,
                position: 'center',
                formatter: '{b}\n{c}',
                align: 'center',
                verticalAlign: 'middle',
                // 此处重点，字体大小设置为0
                textStyle: {
                  fontSize: '0'
                }
              },
              emphasis: {
                show: false,
                textStyle: {
                  fontSize: '20',
                  fontWeight: 'bold'
                },
                // 同步样式
                formatter: function(params) {
                  return `{tTitle|${params.name}}\n{tSubTitle|${params.value}}`
                },
                rich: {
                  tTitle: {
                    fontSize: '14',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  },
                  tSubTitle: {
                    fontSize: '20',
                    fontWeight: 'bold',
                    lineHeight: '25'
                  }
                }
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: _data3
          }]
        }





        myChart1.setOption(options1)
        myChart2.setOption(options2)
        myChart3.setOption(options3)
        window.addEventListener("resize", function() {
          myChart1.resize()
          myChart2.resize()
          myChart3.resize()
        })



      },
      clearanceRateEnter(e) {
        this.clearanceRateShow = true;
      },
      clearanceRateLeave(e) {
        this.clearanceRateShow = false;
      }

    }
  }
</script>

<style>
  .hlk-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
  }

  .kongyun,
  .luyun,
  .haiyun {
    width: 100%;
    height: 100%;
    display: block;

  }
</style>
